<template>
	<view :data-theme="theme" style="display: flex;flex-direction: column; height: 100%;">
		<u-form labelPosition="left" :model="form1" :rules="rules" ref="uForm">
			<view class="card" style="margin-top: 20rpx;padding: 10px 10px 10px; 10px">
				<u-form-item label="运输方式" prop="modeOfTransport" required labelWidth="80" ref="item1">
					<view class="input-container" style="display: flex;" @click="editDisabled ? null : radioGroup()">
						<input v-model="form1.modeOfTransport" disabled placeholder="请选择" border="surround"
							style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx; pointer-events: none;"></input>
						<u-icon v-if="!editDisabled" name="arrow-right" color="#808080" size="16" class="fixed-right"
							style="display: flex;flex-flow: row;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="贮存方式" prop="storageMode" required labelWidth="80" ref="item1">
					<view class="input-container" style="display: flex;" @click="editDisabled ? null : radioGroup2()">
						<input v-model="form1.storageMode" disabled placeholder="请选择" border="surround"
							style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx; pointer-events: none;"></input>
						<u-icon v-if="!editDisabled" name="arrow-right" color="#808080" size="16" class="fixed-right"
							style="display: flex;flex-flow: row;"></u-icon>
					</view>
				</u-form-item>
				<!-- <u-form-item label="生产日期" prop="manufactureDate" required labelWidth="80" ref="item1">
					<view class="input-container" style="display: flex;">

						<uni-datetime-picker type="datetime" v-model="form1.manufactureDate"><input
								v-model="form1.manufactureDate" disabled placeholder="请选择" border="surround"
								style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx; pointer-events: none;"></input>
							<u-icon v-if="!editDisabled" name="arrow-right" color="#808080" size="16"
								class="fixed-right"
								style="display: flex;flex-flow: row;"></u-icon></uni-datetime-picker>
					</view>
				</u-form-item> -->
				<u-form-item label="保质期" prop="isShelfLife" required labelWidth="80" ref="item1"
					style="margin-bottom: 30rpx;">
					<view class="sku-select1" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;padding-left: 20rpx;">
						<view class="radio" :class='item.id == form1.isShelfLife? "active" : ""'
							v-for="(item,index) in buttonData" :key="index"
							@click="editDisabled ? null : attChange(item)">
							{{item.name}}
						</view>
					</view>
				</u-form-item>
				<view v-if="form1.isShelfLife == '1'" class="input-container" style="margin-left: 160rpx;width: 40%;">
					<input v-model.trim="form1.shelfLifeNumber" placeholder="填时长" type="number" border="surround"
						style="padding-left:10rpx;padding-right: 120rpx; background-color: #fff;border-radius: 10rpx;border: 1px solid #c2c2c1;height: 60rpx;"></input>
					<view class="fixed-right" style="display: flex;flex-flow: row;"
						:style="{color:showGroupUnit7?bgColor:null}" @click="editDisabled ? null : openGroupUnits(7)">
						<span style="margin: 0 10rpx;display: inline-block;">|</span>
						<view style="font-size: 14px;margin-right: 6rpx;">
							<span v-if="form1.shelfLifeUnit == '月'">个</span>{{form1.shelfLifeUnit}}
						</view>
						<u-icon :name="showGroupUnit7?'arrow-up-fill':'arrow-down-fill'" size="12"
							:color="showGroupUnit7?bgColor:''"></u-icon>
					</view>
				</view>
				<u-form-item label="国产进口" prop="isDomestic" required labelWidth="80" ref="item1">
					<view class="input-container" style="display: flex;"
						@click="editDisabled ? null : isDomesticRadioGroup()">
						<input v-model="form1.isDomestic" disabled placeholder="请选择" border="surround"
							style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx; pointer-events: none;"></input>
						<u-icon v-if="!editDisabled" name="arrow-right" color="#808080" size="16" class="fixed-right"
							style="display: flex;flex-flow: row;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="食材标签" prop="foodLabels" required labelWidth="80" ref="item1">
					<view class="input-container" style="display: flex;"
						@click="editDisabled ? null : foodLabelsRadioGroup()">
						<input v-model="form1.foodLabels" disabled placeholder="请选择" border="surround"
							style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx; pointer-events: none;"></input>
						<u-icon v-if="!editDisabled" name="arrow-right" color="#808080" size="16" class="fixed-right"
							style="display: flex;flex-flow: row;"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="商品外包装名称" prop="foodOuterPack" required labelWidth="80" style="line-height: 2;"
					ref="item1">
					<view class="input-container" style="display: flex;">
						<input v-model="form1.foodOuterPack" placeholder="长度100" border="surround" maxlength="100"
							style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx;background-color: #f5f5f5;border-radius: 10rpx;border: 1px solid #eee;"></input>
					</view>
				</u-form-item>
				<view v-if="showMoreItem">
					<u-form-item label="商品包装标注产地" prop="packageLabel" labelWidth="80" style="line-height: 2;"
						ref="item1">
						<view class="input-container" style="display: flex;">
							<!-- @click="editDisabled ? null : packageLabelRadioGroup()" -->
							<picker mode="multiSelector" @change="bindPickerChange" @columnchange="selMonitor"
								:range="citygoryTree">
								<input v-model="form1.addressNode" disabled placeholder="请选择" border="surround"
									style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx; pointer-events: none;"></input>
								<u-icon v-if="!editDisabled" name="arrow-right" color="#808080" size="16"
									class="fixed-right" style="display: flex;flex-flow: row;"></u-icon>
							</picker>
						</view>
					</u-form-item>
					<u-form-item label="商品包装标注工厂名称" prop="factoryLabelName" labelWidth="80" style="line-height: 2;"
						labelStyle="padding-right:12rpx" ref="item1">
						<view class="input-container" style="display: flex;">
							<input v-model="form1.factoryLabelName" placeholder="中英文或数字,长度100" border="surround"
								maxlength="100"
								style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx;background-color: #f5f5f5;border-radius: 10rpx;border: 1px solid #eee;"></input>
						</view>
					</u-form-item>
					<u-form-item label="商品包装标注工厂地址" prop="factoryLabelAddress" labelWidth="80" style="line-height: 2;"
						ref="item1">
						<view class="input-container" style="display: flex;">
							<input v-model="form1.factoryLabelAddress" placeholder="中英文或数字,长度100" border="surround"
								maxlength="100"
								style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx;background-color: #f5f5f5;border-radius: 10rpx;border: 1px solid #eee;"></input>
						</view>
					</u-form-item>
					<u-form-item label="备忘SKU条码" prop="skuNoteBarcode" labelWidth="80" style="line-height: 2;"
						ref="item1">
						<view class="input-container" style="display: flex;">
							<input v-model="form1.skuNoteBarcode" placeholder="中英文或数字,长度100" border="surround"
								maxlength="100"
								style="padding-left:10rpx;padding-right: 120rpx;height: 60rpx;background-color: #f5f5f5;border-radius: 10rpx;border: 1px solid #eee;"></input>
						</view>
					</u-form-item>
				</view>
				<view class="show-more-item">
					<span style="color: #767676;padding-right: 10rpx;"
						@click="isShowMoreItem">{{showMoreItem?'收起':'展开（非必填内容）'}}</span>
					<u-icon v-if="showMoreItem" name="arrow-up" color="#ccc" size="18"></u-icon>
					<u-icon v-if="!showMoreItem" name="arrow-down" color="#ccc" size="18"></u-icon>
				</view>
			</view>
		</u-form>
		<view style="height: 120rpx;"></view>
		<!-- 运输方式选择 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroupUnit8" @close="close">
				<view class="u-demo-block2 ensure">
					<view class="title">
						<text @click="close" class="iconfont icon-guanbi5"></text>
						选择运输方式
						<text @click="modeOfTransportComuleDate" class="iconfontRight">确认</text>
					</view>
					<view style="margin: 10px 0 10px 0">
						<radio-group v-model="radiovalue1" @change="radioChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(item, index) in radiolist1" :key="index">
								<view>
									<radio :value="item.type" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</tui-drawer>
		</view>
		<!-- 贮存方式选择 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroupUnit9" @close="close">
				<view class="u-demo-block2 ensure">
					<view class="title">
						<text @click="close" class="iconfont icon-guanbi5"></text>
						选择贮存方式
						<text @click="storageModeComuleDate" class="iconfontRight">确认</text>
					</view>
					<view style="margin: 10px 0 10px 0">
						<radio-group @change="radioChange2">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(item, index) in radiolist2" :key="index">
								<view>
									<radio :value="item.name" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</tui-drawer>
		</view>
		<!-- 国产进口选择 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroupIsDomestic" @close="close">
				<view class="u-demo-block2 ensure">
					<view class="title">
						<text @click="close" class="iconfont icon-guanbi5"></text>
						国产进口
						<text @click="isDomesticComuleDate" class="iconfontRight">确认</text>
					</view>
					<view style="margin: 10px 0 10px 0">
						<radio-group @change="isDomesticRadioChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(do_item, index) in isDomesticRadiolist" :key="index">
								<view>
									<radio :value="do_item.name" />
								</view>
								<view style="line-height: 19px;">{{do_item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</tui-drawer>
		</view>
		<!-- 保质期单位 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroupUnit7" @close="close">
				<view class="u-demo-block2 ensure">
					<view class="title">
						<text @click="close" class="iconfont icon-guanbi5"></text>
						选择保质日期单位
						<text @click="shelfLifeUnitComuleDate" class="iconfontRight">确认</text>
					</view>
					<!-- <view class="title" style="text-align: center;position: relative;padding-top: 20rpx;">选择保质日期单位<text
							@click="close" class="iconfont icon-guanbi5"
							style="position: absolute;right: 30rpx; top: 0;padding-top: 20rpx;"></text></view> -->
					<view style="margin: 10px 0 10px 0">
						<view class="sku-select">
							<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
								<view class="flex-text" :class='item.name == shelfLifeUnit? "right-class-active" :""'
									v-for="(item,index) in shelfLifeUnitList" :key="index" @click='tapAttr(item)'>
									<span v-if="item.name == '月'">个</span>{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</tui-drawer>
		</view>
		<!-- 食材标签选择 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroupFoodLabels" @close="close">
				<view class="u-demo-block2 ensure">
					<view class="title">
						<text @click="close" class="iconfont icon-guanbi5"></text>
						食材标签
						<text @click="foodLabelsComuleDate" class="iconfontRight">确认</text>
					</view>
					<view style="margin: 10px 0 10px 0">
						<radio-group @change="foodLabelsRadioChange">
							<label
								style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(do_item, index) in foodLabelsRadiolist" :key="index">
								<view>
									<radio :value="do_item.name" />
								</view>
								<view style="line-height: 19px;">{{do_item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</tui-drawer>
		</view>

		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
			<button @click="saveInformation" class="bg_color"
				style="font-weight: bold;border-radius: 10px;padding: 20rpx;color:#fff" :color="bgColor">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		cityRegionTreeApi
	} from '@/api/merchant.js';
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				form1: {
					// resource: '', // 保质日期选择
					isShelfLife: '', // 保质日期选择
					storageMode: '',
					modeOfTransport: '', //运输方式
					isDomestic: '', //是否进口，1国产，2进口
					foodLabels: '', //食材标签
					foodOuterPack: '', //食品外包装名称
					addressNode: '', //商品外包装标注产地
					factoryLabelName: '', //商品包装标注工厂名称
					factoryLabelAddress: '', //标注工厂地址
					skuNoteBarcode: '', //备忘SKU条码
					// manufactureDate: '',
				},
				citygoryTree: [], //城市缓存树
				provinceList: [],
				cityAllList: [],
				value: [0, 0],
				rules: {
					isShelfLife: {
						type: 'string',
						required: true,
						message: '保质期不能为空',
						trigger: ['blur', 'change']
					},
					modeOfTransport: {
						type: 'string',
						required: true,
						message: '商品运输方式不能为空',
						trigger: ['blur', 'change']
					},
					// manufactureDate:{
					// 	type: 'string',
					// 	required: true,
					// 	message: '生产日期不能为空',
					// 	trigger: ['blur', 'change']
					// },
					storageMode: {
						type: 'string',
						required: true,
						message: '商品贮存方式不能为空',
						trigger: ['blur', 'change']
					},
					isDomestic: {
						type: 'string',
						required: true,
						message: '商品国产进口不能为空',
						trigger: ['blur', 'change']
					},
					foodLabels: {
						type: 'string',
						required: true,
						message: '食材标签不能为空',
						trigger: ['blur', 'change']
					},
					foodOuterPack: {
						type: 'string',
						required: true,
						message: '商品外包装名称',
						trigger: ['blur', 'change']
					},
					// factoryLabelName: {
					// 	type: 'string',
					// 	required: true,
					// 	message: '商品包装标注工厂名称',
					// 	trigger: ['blur', 'change']
					// },
					// factoryLabelAddress:{
					// 	type: 'string',
					// 	required: true,
					// 	message: '商品包装标注工厂地址',
					// 	trigger: ['blur', 'change']
					// },
					// skuNoteBarcode:{
					// 	type: 'string',
					// 	required: true,
					// 	message: '备忘SKU条码',
					// 	trigger: ['blur', 'change']
					// }
				},
				buttonData: [{
					name: '有保质期',
					id: '1'
				}, {
					name: '无保质期',
					id: '0'
				}],
				showGroupUnit7: false, //保质期单位
				showGroupUnit8: false, //运输方式弹窗
				showGroupUnit9: false, // 贮存方式
				showGroupIsDomestic: false, //国产进口
				showGroupFoodLabels: false, //食材标签选择
				showGroupPackageLabel: false, //包装标注产地
				shelfLifeUnitList: [{
					name: '月',
					id: 1,
				}, {
					name: '年',
					id: 2,
				}, {
					name: '天',
					id: 3
				}],
				shelfLifeUnit: '', // 保质期单位
				// 运输方式
				radiolist1: [{
						name: '-20℃冷冻运输',
						disabled: false,
						type: '1',
					},
					{
						name: '冷藏运输',
						disabled: false,
						type: '2',
					},
					{
						name: '常温运输',
						disabled: false,
						type: '3',
					}, {
						name: '其他',
						disabled: false,
						type: '4',
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				// 贮存方式
				radiolist2: [{
						name: '冷藏',
						disabled: false,
						id: 1
					},
					{
						name: '冷冻',
						disabled: false,
						id: 2
					},
					{
						name: '常温',
						disabled: false,
						id: 3,
					}
				],
				radiovalue2: '', //储存方式所选值
				isDomesticRadiolist: [{
						name: '国产',
						disabled: false,
						type: 1
					},
					{
						name: '进口',
						disabled: false,
						type: 2
					},
				], // 国产进口类型
				isDomesticValue: '', // 国产进口类型所选值
				attChangeValue: null,
				// ------食材标签方式------
				foodLabelsValue: '',
				foodLabelsRadiolist: [{
						name: '纸篓',
						disabled: false,
						type: '1'
					},
					{
						name: '水瓢',
						disabled: false,
						type: '2'
					},
					{
						name: '保鲜盒',
						disabled: false,
						type: '3',
					}
				],

				innterIndexUnits: '',
				editDisabled: false,
				// 展示更多
				showMoreItem: false,
			};
		},
		async onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			await this.getCityRegionTree();
			let that = this;
			// that.form1 = {
			// 	isShelfLife: '有保质期',
			// 	shelfLifeUnit: '个月',
			// };
			// that.shelfLifeUnit = '个月';

			// APP-NVUE平台暂不支持以this.getOpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('productInfo', function(param) {
				if (param.type == "edit") {
					uni.setNavigationBarTitle({
						title: '修改信息'
					});
					// that.editDisabled = true;

					that.form1 = {
						...param.data
					}; //克隆属性
				} else {
					that.form1 = {
						isShelfLife: '1', //1有保质期，0没有
						shelfLifeUnit: '月',
					};
					that.shelfLifeUnit = '月';

					that.editDisabled = false;
					// console.log('editDisabled', that.editDisabled,that.productAttrParam)
				}
			});
		},
		methods: {
			// 显示更多
			isShowMoreItem() {
				this.showMoreItem = !this.showMoreItem;
			},
			/**
			确认保存事件
			 */
			saveInformation() {
				let that = this;
				if (this.form1.isShelfLife == '1') {
					if (!this.form1.shelfLifeNumber) {
						uni.$u.toast('保质期时间不能为空');
						return;
					}
				};
				this.$refs.uForm.validate().then(res => {
					// 更新源数据。
					if (this.form1.isShelfLife == '0') {
						this.form1.shelfLifeUnit = '';
						this.form1.shelfLifeNumber = '';
					};
					// 	//商品保存：添加、编辑规格数据
					that.toSaveProduct(that.form1);

					// if (that.productAttrParam.from == "saveProduct") {
					// 	//商品保存：添加、编辑规格数据
					// 	that.toSaveProduct(that.productAttrParam);
					// } else {
					// 	console.log("TODO 商品快捷添加规格（直接入库）");
					// 	//TODO 商品快捷添加规格（直接入库）
					// }

				}).catch(errors => {
					console.log("submitProductAttr error", errors);
					uni.$u.toast('请填写完整规格信息！');
				})
			},
			/** 
			 *保存商品规格返回商品页面
			 */
			toSaveProduct(param) {
				let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let prevPage = pages[pages.length - 2] //上一页页面实例
				uni.navigateBack({
					delta: 1,
					success: () => {
						prevPage.$vm.spInformationFun(param) // 给上一页绑定方法otherFun,
					}
				})
			},
			// 质保期选择
			attChange(item) {
				this.attChangeValue = item.id;
				this.form1.isShelfLife = item.id;
				this.$set(this.form1, 'isShelfLife', item.id)
				this.shelfLifeUnit = '月';
				this.form1.shelfLifeUnit = '月';
			},
			/** 
			 *保质期单位确认
			 */
			shelfLifeUnitComuleDate() {
				if (this.shelfLifeUnit == '') {
					return uni.$u.toast('请选择保质期单位');
				};
				this.$set(this.form1, 'shelfLifeUnit', this.shelfLifeUnit);
				this.showGroupUnit7 = false;
			},
			//运输方式弹窗
			radioGroup() {
				this.showGroupUnit8 = true;
			},

			radioChange(n) {
				let radioValue = n.detail.value;
				this.radiovalue1 = radioValue;
			},
			// 运输方式确认弹窗
			modeOfTransportComuleDate() {
				let that = this;
				if (that.radiovalue1 == '') {
					return uni.$u.toast('请选择运输方式')
				};
				for (let i = 0; i < that.radiolist1.length; i++) {
					if (that.radiolist1[i].type == that.radiovalue1) {
						this.$set(that.form1, 'modeOfTransport', that.radiolist1[i].name)
					}
				}
				// this.$set(that.form1,'modeOfTransport',that.radiovalue1)
				that.showGroupUnit8 = false;
			},
			//贮存方式弹窗
			radioGroup2() {
				this.showGroupUnit9 = true;
			},
			// 单选事件按钮
			radioChange2(n) {
				let radioValue2 = n.detail.value;
				this.$set(this, 'radiovalue2', radioValue2)
			},
			// 贮存方式确认弹窗
			storageModeComuleDate() {
				if (this.radiovalue2 == '') {
					return uni.$u.toast('请选择贮存方式');
				};
				this.$set(this.form1, 'storageMode', this.radiovalue2)
				this.showGroupUnit9 = false;
			},

			// 国产进口
			isDomesticRadioGroup() {
				this.showGroupIsDomestic = true
			},
			// 是否国产单选事件按钮
			isDomesticRadioChange(n) {
				let isDomesticValue = n.detail.value;
				this.$set(this, 'isDomesticValue', isDomesticValue)
			},
			// 国产方式确认弹窗
			isDomesticComuleDate() {
				if (this.isDomesticValue == '') {
					return uni.$u.toast('请选择国产/进口');
				};
				this.$set(this.form1, 'isDomestic', this.isDomesticValue)
				this.showGroupIsDomestic = false;
			},

			// 食材标签
			foodLabelsRadioGroup() {
				this.showGroupFoodLabels = true
			},
			foodLabelsRadioChange(n) {
				let foodLabelsValue = n.detail.value;
				this.$set(this, 'foodLabelsValue', foodLabelsValue)
			},
			foodLabelsComuleDate() {
				if (this.foodLabelsValue == '') {
					return uni.$u.toast('请选择食材标签');
				};
				this.$set(this.form1, 'foodLabels', this.foodLabelsValue)
				this.showGroupFoodLabels = false;
			},

			// 包装标注产地
			bindPickerChange: function(e) {
				const that = this;
				let val = e.target.value
				this.cityList = val
				// that.addressNode = {
				// 	province: that.citygoryTree[0][this.cityList[0]],
				// 	city: that.citygoryTree[1][this.cityList[1]]
				// }
				let addressNode = `${that.citygoryTree[0][this.cityList[0]]}` + '/' +
					`${that.citygoryTree[1][this.cityList[1]]}`
				this.$set(that.form1, 'addressNode', addressNode)
			},
			// 监听省市区滚动
			selMonitor(e) {
				const that = this
				let column = e.detail.column
				if (column == 0) {
					let index = e.detail.value
					let length = that.citygoryTree[1].length
					// 改变市
					that.citygoryTree[1].splice(0, length, ...that.cityAllList[index])
				}
			},

			//单位选择--打开弹框
			openGroupUnits(ele) {
				this.innterIndexUnits = ele;
				if (ele == 7) {
					this.showGroupUnit7 = true; //打开保质期单位弹窗
				}
			},
			tapAttr(skuItem) {
				if (this.innterIndexUnits == 6) {
					// this.form1.productAttr.specUnit.cartonUnit = skuItem.name;
					this.$set(this.form1.productAttr.specUnit, 'cartonUnit', skuItem.name)
				}
				if (this.innterIndexUnits == 7) {
					// this.form1.productAttr.specUnit.shelfLifeUnit = skuItem.name;
					this.$set(this, 'shelfLifeUnit', skuItem.name)
				}
			},
			// 关闭弹窗事件
			close() {
				this.showGroupUnit7 = false; //保质期单位弹窗
				this.showGroupUnit8 = false; //储存方式弹窗
				this.showGroupUnit9 = false; //运输方式弹窗
				this.showGroupIsDomestic = false; // 国产进口
				this.showGroupFoodLabels = false; //食材标签
			},


			// 查询城市区域分类缓存树
			async getCityRegionTree() {
				let res = await cityRegionTreeApi();
				let that = this;
				if (res.code == 200) {
					const result = [];

					// 遍历数组中的每个对象
					for (const item of res.data) {
						// 提取对象的基本信息
						const extractedItem = {
							id: item.regionId,
							// parentId: item.parentId,
							name: item.regionName,
							// regionType: item.regionType
						};

						// 如果对象包含子对象，则将子对象的基本信息也提取出来
						if (item.child && item.child.length > 0) {
							extractedItem.children = [];
							for (const childItem of item.child) {
								const extractedChildItem = {
									id: childItem.regionId,
									// parentId: childItem.parentId,
									name: childItem.regionName,
									// regionType: childItem.regionType
								};
								extractedItem.children.push(extractedChildItem);
							}
						}

						// 将提取的对象添加到结果数组中
						result.push(extractedItem);
					}
					// 所有城市列表,二维数组
					let cityAllList = [];
					// 省列表
					let provinceList = [];
					// address为省市区的json数据
					for (let key in result) {
						let newDataList = [];
						if (result[key].children) {
							for (let key2 in result[key].children) {
								newDataList.push(result[key].children[key2].name);
							}
						}
						provinceList.push(result[key].name);
						cityAllList.push(newDataList);
					}
					that.provinceList = provinceList;
					that.cityAllList = cityAllList;
					that.citygoryTree = [provinceList, cityAllList[0]];
				}
			},

		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.sku-select1 {
		// margin-left: 15%;

		.radio {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			// line-height: 62rpx;
			float: left;
			text-align: center;
			color: #777;
			padding: 16rpx 34rpx;
			font-size: 26rpx;
			font-weight: bolder;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}

	.input-container {
		position: relative;
		width: 99%;
		padding-left: 20rpx;

		.fixed-right {
			position: absolute;
			right: 8rpx;
			/* 调整固定文字的右侧偏移量 */
			top: 50%;
			transform: translateY(-50%);
			padding: 10rpx;
			color: #808080;
		}
	}

	.u-demo-block2 {
		height: 60vh;
		padding: 20rpx;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.sku-select {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 16rpx 34rpx;
			font-size: 26rpx;
			font-weight: bolder;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}

	.item-expanded {
		flex-grow: 2 !important;
	}

	.show-more-item {
		border-top: 1px solid #efefef;
		padding: 30rpx 0 10rpx 0;
		justify-content: center;
		align-items: center;
		justify-items: center;
		display: flex;
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bolder;
			color: #282828;
			text-align: center;
			margin: 12rpx 0 36rpx 0;
			position: relative;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 30rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				// font-size: 36rpx;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}

		.list {
			height: 750rpx;
			margin: 0 30rpx;
			overflow-x: hidden;
			overflow-y: auto;

			.item {
				margin-bottom: 52rpx;

				.pictrue {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 30rpx;

					/deep/image,
					.easy-loadimage,
					image,
					uni-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.text {
					width: 618rpx;
					color: #999999;
					font-size: 28rpx;

					.name {
						color: #333333;
						font-weight: bold;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>